<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
</head>
<body>
<div style="margin: 20px auto; max-width: 1140px">
    <div class="layui-row " style="position: relative;right: 93px">
        <div class="layui-col-md10 layui-col-md-offset1">
            <div class="demoTable">
                <div class="layui-inline">
                    <input class="layui-input" name="studentName" id="studentName" placeholder="请输入姓名">
                </div>
                <div class="layui-inline">
                    <select class="layui-inline" name="=studentId" id="student1IdSelect" style="display: inline-block;height: 35px"></select>
                    <select class="layui-inline" name="studentStatus" id="studentStatusSelect" style="display: inline-block;height: 35px">
                        <option value="2" disabled selected>请选择状态</option>
                        <option value="0">启用</option>
                        <option value="1">停用</option>
                    </select>
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
                <button class="layui-btn" id="resetButton">重置</button>
            </div>
        </div>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>


<div id="studentItem" style="display: none;position: relative;margin: 50px">
    <form class="layui-form layui-form-pane" lay-filter="viewForm">
        <div class="layui-form-item">
            <label class="layui-form-label">学生姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="studentName" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生学号</label>
            <div class="layui-input-inline">
                <input type="text" name="studentsId" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级Id</label>
            <div class="layui-input-inline">
                <input type="text" name="clazzId" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生性别</label>
            <div class="layui-input-inline">
                <input type="text" name="studentSex" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生地址</label>
            <div class="layui-input-inline">
                <input type="text" name="studentAddress" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">籍贯</label>
            <div class="layui-input-inline">
                <input type="text" name="studentRegaress" lay-verify="required" autocomplete="off" class="layui-input"
                       disabled>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" name="studentIdent"  lay-verify="required" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>
    </form>
</div>
<div id="editStudent" style="display: none;position: relative;margin: 50px">
    <form class="layui-form layui-form-pane" lay-filter="editForm" id="editForm" action="">
<!--        <div class="layui-form-item" style="display: none">-->
        <!--            <label class="layui-form-label">学生Id</label>-->
        <!--            <div class="layui-input-inline">-->
        <!--                <input type="text" name="studentId" lay-verify="required" autocomplete="off" class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">学生姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="studentName" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生学号</label>
            <div class="layui-input-inline">
                <input type="text" name="studentsId" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生性别</label>
            <div class="layui-input-inline">
                <input type="text" name="studentSex" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学生住址</label>
            <div class="layui-input-inline">
                <input type="text" name="studentAddress" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">入学时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="studentTime" placeholder="yyyy-MM-dd">
            </div>
        </div>
<!--        入学时间div-->
        <div class="layui-form-item">
            <label class="layui-form-label">祖籍</label>
            <div class="layui-input-inline">
                <input type="text" name="studentregAddress" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-inline">
                <input type="text" name="studentIdent" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
<!--        <div class="layui-form-item" style="display: none">-->
<!--            <label class="layui-form-label">状态</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="userStatus" lay-verify="required" autocomplete="off" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="insert">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="startUsing" style="background-color: #31BDEC">启用</button>
        <button class="layui-btn layui-btn-sm" lay-event="stopUsing" style="background-color: #FFB800">停用</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete" style="background-color: #FF5722">删除选中用户
        </button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="modifyStatus">修改状态</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

</script>

<script>
    layui.use(['table', 'dropdown', 'form', 'upload'], function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        let form = layui.form;
        var $ = layui.$, active = {
            reload: function () {
                var studentName = $("#studentName");
                var studentStatus = $("#studentStatusSelect");
                console.log(studentName.val())
                console.log(studentStatus.val())
                //执行重载
                layer.msg(0)
                table.reload('test', {
                    url: '/student/selectAllStudent',
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        name: studentName.val() == "" ? null : studentName.val(),
                        status: studentStatus.val() == 0 ? null : studentStatus.val()
                    }
                });
            }
        }
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        // 创建渲染实例
        table.render({
            elem: '#test'
            , url: "/student/selectAllStudent"
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: '帮助'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , height: 'full-200'
            , cellMinWidth: 80
            , totalRow: true
            , page: true
            , limit: 10
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'studentId', width: 80, fixed: 'left', width: 70, title: 'ID', sort: true, totalRowText: '合计：'}
                , {field: 'studentName', width: 100, title: '学生姓名'}
                , {field: 'studentSex', width: 100, title: '学生性别', sort: true}
                , {field: 'studentAddress',title: '地址', minWidth: 260, style: '-moz-box-align: start;'}
                , {
                    field: 'studentStatus', width: 100, title: '状态', templet: function (data) {
                        if (data.studentStatus == 0)
                            return '<span style="color: #00FF00">启用</span>';
                        else
                            return '<span style="color: #d43f3a">停用</span>';
                    }
                }
                , {field: 'studentTime', width: 120, title: '入学时间'}
                , {field: 'studentRegaress', width: 200, title: '学生籍贯'}
                , {field: 'studentIdent', width: 180, title: '身份证号',sort: true}
                , {field: 'studentData', width: 200, title: '学生备注'}
                , {fixed: 'right', title: '操作', width: 270, minWidth: 270, toolbar: '#barDemo'}
            ]]
        });

        // 更多测试
        dropdown.render({
            elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
            , data: [{
                id: 'add',
                title: '添加'
            }, {

                id: 'update',
                title: '编辑'
            }, {
                id: 'delete',
                title: '删除'
            }]
            , click: function (obj) {
            var checkStatus = table.checkStatus(id)
            var data = checkStatus.data; // 获取选中的数据
            switch (obj.id) {
                case 'add':
                    layer.open({
                        title: '添加',
                        type: 1,
                        area: ['80%', '80%'],
                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                    });
                    break;
                case 'update':
                    if (data.length !== 1) return layer.msg('请选择一行');
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['80%', '80%'],
                        content: '<div style="padding: 16px;">自定义表单元素</div>'
                    });
                    break;
                case 'delete':
                    if (data.length === 0) {
                        return layer.msg('请选择一行');
                    }
                    layer.msg('delete event');
                    break;
            }
        }
    });
        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'insert':
                    form.val('myForm', {
                        'studentId': 0,
                        'studentName': '',
                        'clazzId':0,
                        'studentsId':'',
                        'studentSex':'',
                        'studentAddress':'',
                        'studentStatus':0,
                        'studentTime':'',
                        'studentRegaress':'',
                        'studentIdent':'',
                        'studentData':'',
                    });
                    $("#editForm").attr("action", '/student/insertStudent')
                    editDiv = layer.open({
                        title: '新增',
                        type: 1,
                        area: ['60%', '80%'],
                        content: $("#editStudent"),
                        shade: 0
                    });
                    break;
                case 'startUsing':
                    var data = checkStatus.data;
                    var studentIdList = new Array()
                    for (var i in data) {
                        studentIdList.push(data[i].studentId)
                    }
                    $.ajax({
                        url: '/student/updateStudentStatus',
                        type: 'put',
                        dataType: 'json',
                        data: JSON.stringify({studentIds: studentIdList, studentStatus: 0}),
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code == 0) {
                                table.reload("test")
                            }
                        }
                    })
                    break;
                case 'stopUsing':
                    var data = checkStatus.data;
                    var studentIdList = new Array()
                    for (var i in data) {
                        studentIdList.push(data[i].studentId)
                    }
                    $.ajax({
                        url: '/student/updateStudentStatus',
                        type: 'put',
                        dataType: 'json',
                        data: JSON.stringify({studentIds: studentIdList, studentStatus: 1}),
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code == 0) {
                                table.reload("test")
                            }
                        }
                    })
                    break;
                case 'delete':
                    layer.confirm('确定删除？', function (index) {
                        var data = checkStatus.data;
                        var studentIdList = new Array()
                        for (var i in data) {
                            studentIdList.push(data[i].studentId)
                        }
                        console.log(JSON.stringify({studentIds: studentIdList}))
                        $.ajax({
                            url: '/student/deleteStudent',
                            type: 'delete',
                            dataType: 'json',
                            data: JSON.stringify({studentIds: studentIdList}),
                            contentType: 'application/json',
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.msg("删除成功")
                                    table.reload("test")
                                } else {
                                    lay.msg(res.msg)
                                }
                            }
                        })
                        layer.close(index)
                    })
                    break;
            }
        });
        //触发单元格工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    layer.msg(JSON.stringify({studentIds:data.studentId}));
                    var dd={studentIds:data.studentId};
                    var studentIdList = new Array()

                    $.ajax({
                        url: '/student/deleteStudent',
                        data:JSON.stringify(dd),
                        type: 'delete',
                        dataType: 'json',
                        data: JSON.stringify({studentIds: studentIdList}),
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code == 0) {
                                layer.msg("删除成功")
                                table.reload("test")
                                obj.del();
                            } else {
                                lay.msg(res.msg)
                            }
                        }
                    })
                    layer.close(index);

                });
            } else if (obj.event === 'edit') {
                console.log(data)
                form.val('editForm', {
                    'studentId': data.studentId,
                    'studentName': data.studentName,
                    'studentsId': data.studentsId,
                    'clazzId': data.clz.clazzId,
                    'studentSex': data.studentSex,
                    'studentAddress': data.studentAddress,
                    'studentStatus': data.studentStatus,
                    'studentTime': data.studentTime,
                    'studentRegaress': data.studentRegaress,
                    'studentIdent': data.studentIdent,
                    'studentData': data.studentData
                })
                $("#editForm").attr("action", '/student/updateStudent')
                editDiv = layer.open({
                    title: '编辑',
                    type: 1,
                    area: ['60%', '80%'],
                    content: $("#editStudent"),
                    shade: 0
                });
            } else if (obj.event === 'view') {
                form.val('viewForm', {
                    'studentId': data.studentId,
                    'studentName': data.studentName,
                    'studentsId': data.studentsId,
                    'clazzId': data.clz.clazzId,
                    'studentSex': data.studentSex,
                    'studentAddress': data.studentAddress,
                    'studentStatus': data.studentStatus,
                    'studentTime': data.studentTime,
                    'studentRegaress': data.studentRegaress,
                    'studentIdent': data.studentIdent,
                    'studentData': data.studentData
                })
                layer.open({
                    title: '学生信息',
                    type: 1,
                    area: ['60%', '60%'],
                    content: $("#studentItem"),
                    shade: 0
                });
            } else if (obj.event === "modifyStatus") {
                console.log(data)
                var studentIds = [data.studentId]
                let studentStatus = 0;
                if (data.studentStatus == 0) {
                    studentStatus = 1;
                }
                console.log(studentIds)
                $.ajax({
                    url: '/student/updateStudentStatus',
                    type: 'put',
                    data: JSON.stringify({
                        studentIds: studentIds,
                        studentStatus: studentStatus
                    }),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.code == 0) {
                            table.reload('test')
                            layer.close("editDiv");
                        } else {
                            layer.msg(data.msg)
                        }
                    }
                })
            }
        });
        form.on('submit(sub)', function (data) {
            let da = data.field;
            let url = $("#editForm").attr("action")
            $.ajax({
                url: url,
                type: 'put',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(da),
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg("成功")
                        table.reload("test");
                        layer.close(editDiv)
                    } else {
                        layer.msg(data.msg)
                    }
                }
            })
            return false;
        })
    })

</script>
</body>
</html>